<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12_固定定位广告条</title>
    <style>
        .top{
            background-color: #5AA4AE;
            height: 120px;
            color: #fff;
            font-size: 30px;
            position: fixed;
            width: 100vw;
            top: 0;
        }
        .main{
            margin-top: 130px;
        }
        .left,.right{
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left{
            background-color: #FFF799;
            left: 20px;
        }
        .right{
            background-color: #F35336;
            right: 20px;
        }
    </style>
</head>
<body>
    <div class="top">顶部广告条</div>
    <div class="left">左侧广告条</div>
    <div class="right">右侧广告条</div>
    <div class="main">
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A asperiores aut autem beatae blanditiis
            consequatur consequuntur dignissimos, dolore, doloribus eveniet fugiat inventore ipsam maxime nihil omnis
            optio ratione, rem tempore?
        </div>
        <div>Accusantium est harum libero pariatur placeat quas repellendus rerum similique, unde voluptates. Aliquam
            architecto consectetur delectus error hic illum laboriosam laudantium magni natus, possimus praesentium
            quasi repellat suscipit tempora totam.
        </div>
        <div>Beatae, laudantium mollitia quae repellat rerum totam ullam! Dolorum, earum exercitationem expedita iusto,
            necessitatibus nisi omnis placeat reiciendis, repellendus sapiente tempore ut voluptate voluptatem. Beatae
            cum esse inventore magni sunt.
        </div>
        <div>Ad aliquid asperiores autem blanditiis cupiditate eos, facilis, impedit inventore modi nihil optio
            praesentium rerum, sit velit voluptate! Consequatur consequuntur fugiat incidunt, laborum magnam nihil
            officia quos tempora ullam voluptates.
        </div>
        <div>Ad amet consectetur dicta enim fuga ipsum maxime natus nisi similique voluptatem. Aspernatur, earum, eos
            facilis inventore laudantium nemo, neque officiis optio quae quasi quis repudiandae saepe similique sint ut.
        </div>
        <div>Aspernatur, debitis deserunt eum hic maxime nobis quaerat repellat velit. Aperiam autem beatae dicta
            dolorum excepturi explicabo facere fugiat illo magnam nemo omnis perspiciatis qui quidem quos, sequi
            suscipit totam!
        </div>
        <div>Corporis deleniti itaque officiis quibusdam velit. Animi asperiores consectetur consequuntur deserunt eos
            non nulla pariatur porro! Consequuntur error eveniet iste libero molestias nostrum quae tempore! Dolor
            dolorem eligendi sint totam!
        </div>
        <div>Aperiam assumenda quas quod? Aliquam aliquid commodi, delectus dolor dolore enim eos est eveniet facere,
            illo impedit in iste nesciunt porro quisquam quo ratione repudiandae similique, tempore temporibus tenetur
            veritatis.
        </div>
        <div>Animi atque eum ipsam porro quidem, saepe tenetur. Consectetur dolor esse fugiat ipsa nam nihil odit omnis
            optio repellendus totam! Cumque cupiditate dicta dolor dolores est ipsum, minus repudiandae veritatis?
        </div>
        <div>A accusantium alias assumenda autem beatae corporis dicta dolor dolorem dolorum enim esse expedita fugit
            impedit inventore ipsum labore modi molestias necessitatibus, nihil perspiciatis quam, ratione reprehenderit
            saepe temporibus tenetur.
        </div>
        <div>Assumenda cum delectus eum exercitationem incidunt numquam quia totam velit. Ex id porro quia rem tempora,
            tenetur. Aliquam at consectetur dolor doloribus excepturi minus natus, nisi suscipit tenetur totam
            veritatis.
        </div>
        <div>Adipisci architecto, autem consequuntur culpa dolorem eaque enim esse eveniet excepturi explicabo fugit hic
            illo in natus nemo nulla, officia omnis perspiciatis quaerat quasi quidem similique veniam! Harum, neque,
            quae?
        </div>
        <div>Ad, aliquid atque enim facilis iusto, maiores natus officia perferendis perspiciatis quos recusandae
            repellendus velit! A adipisci, autem consequuntur corporis inventore ipsum iure laboriosam nulla odio odit
            sit vel, veritatis!
        </div>
        <div>Aliquam architecto at culpa cum debitis dolor eius eos esse expedita facere illo in ipsum iusto magni
            molestiae nisi obcaecati officiis perferendis quae quibusdam quidem quos, ratione sapiente similique veniam.
        </div>
        <div>A aliquam autem eos ex excepturi, exercitationem hic ipsam laboriosam magnam magni obcaecati quasi quod,
            ratione sapiente veniam. Accusamus alias deserunt dolorem eos esse id libero quaerat quod sint. Nesciunt.
        </div>
        <div>Aliquid doloremque eligendi est ex magnam sed vel voluptatum. Animi aut consequatur cumque deleniti magni
            nam nihil repudiandae rerum similique tenetur. Atque illum odio provident, quidem reiciendis saepe suscipit
            vitae.
        </div>
        <div>Accusantium explicabo facilis fugiat, incidunt molestiae obcaecati quo? Aperiam, architecto aspernatur at
            commodi delectus explicabo fuga fugiat illo ipsa libero magnam maxime praesentium, quis rerum sint
            temporibus unde voluptas voluptatum.
        </div>
        <div>Accusamus adipisci aperiam blanditiis consectetur deleniti eius eos et exercitationem fuga iure iusto
            molestias mollitia nemo nobis non possimus quas qui quia quos repellat tempore, tenetur ullam vero voluptas
            voluptatibus?
        </div>
        <div>Aut error incidunt nemo odit perspiciatis ratione totam vitae voluptate! Accusantium cum deserunt
            doloremque nam rerum sequi ut, veritatis. Eligendi eos harum illo ipsa libero magnam, quia sint tenetur ut.
        </div>
        <div>Alias amet animi consectetur corporis debitis ea eius excepturi exercitationem facilis fugit, labore nemo
            nulla obcaecati, pariatur perspiciatis praesentium quam quia repudiandae sit sunt temporibus totam vero
            voluptas voluptate voluptatum?
        </div>
        <div>Accusantium aliquam eaque incidunt ipsum minus nemo nobis nulla odit ratione repellendus, rerum tempora
            voluptatum? Ad blanditiis distinctio dolorum enim et id, minima perferendis vero voluptates. Labore quasi
            quidem voluptatum.
        </div>
        <div>Animi at consequatur dignissimos eos facere ipsum laboriosam natus perferendis placeat quaerat quasi rem
            sapiente, voluptates. Est iusto laborum maiores minima mollitia sunt veniam vitae. Consequatur ex fuga iste
            sapiente?
        </div>
        <div>Aspernatur consequuntur dignissimos harum iusto laborum quos repudiandae sapiente! A commodi debitis,
            deleniti doloremque laborum molestiae nam natus neque nulla obcaecati odit officiis perferendis qui ratione
            rem tempore unde veniam.
        </div>
        <div>Alias atque aut cumque deleniti doloremque ducimus error eveniet facilis impedit labore nam officia
            officiis perferendis quam sed, sit temporibus vel. Adipisci at ipsam molestias nemo quaerat quam, tempora
            ut?
        </div>
        <div>Deleniti dignissimos magnam optio porro quas quia quibusdam quo. Accusamus deleniti dignissimos, dolor,
            dolore esse hic ipsa iste laborum modi molestiae molestias numquam quos tenetur totam, ullam unde voluptas.
            Obcaecati.
        </div>
        <div>Alias eligendi est fugiat. Aspernatur, distinctio explicabo facere in mollitia nemo nobis optio pariatur
            quibusdam quod, sed tempora totam unde! A animi assumenda illo neque officiis, omnis praesentium rem
            voluptatum.
        </div>
        <div>Ab molestias necessitatibus perferendis rerum voluptatum! Ad alias aliquid beatae, cum delectus facere,
            illo illum incidunt iste, iure magnam necessitatibus nemo neque odit placeat quasi quis quod ratione sit
            voluptate?
        </div>
        <div>A aspernatur, culpa dolorem excepturi iure iusto magnam odit officia placeat quae, quibusdam quos tempore
            totam ut vitae! Ad assumenda, aut corporis error expedita itaque modi nesciunt quidem rem suscipit!
        </div>
        <div>Accusamus asperiores blanditiis cumque eius est explicabo fugit hic iure maxime mollitia nobis numquam odio
            odit quis repudiandae sit sunt tenetur, voluptatem voluptatibus voluptatum. Consequatur id neque vel
            voluptas voluptates.
        </div>
        <div>Aliquid aspernatur eaque maiores odio officia placeat similique sint. A ad dolores eum facilis hic nam odit
            similique! Alias assumenda autem fugiat impedit ipsam maiores nam possimus quidem temporibus voluptatem.
        </div>
        <div>Asperiores at blanditiis debitis, deserunt dicta dignissimos explicabo fuga id in ipsam itaque magnam
            minima molestias natus officia quo ratione sapiente sint tenetur, vel. Architecto culpa dolor officiis
            possimus quam!
        </div>
        <div>Ad aliquam aliquid aperiam, autem consequatur, dicta dolorem ducimus error exercitationem magnam maxime
            minima nesciunt non numquam odit pariatur porro possimus quibusdam quo tempora tempore ullam veritatis vitae
            voluptas voluptatum!
        </div>
        <div>Alias animi aut eos, facilis libero, magnam nisi quam quasi quo, quos repellat repellendus. Adipisci at
            atque culpa cum dolorum eos fuga ipsum magni provident quae saepe sed vel, voluptatibus.
        </div>
        <div>Accusamus aliquid asperiores autem dicta dolore, dolorum eligendi enim, facilis ipsa modi molestias, natus
            nemo numquam odio odit placeat provident soluta vitae. Ad atque dolor dolores ex fuga numquam velit.
        </div>
        <div>Asperiores atque deleniti doloribus, dolorum ducimus error exercitationem harum id ipsum laboriosam libero
            magni minus mollitia nemo numquam omnis quae quis rerum sed sequi sit veritatis vero? Esse, ipsam,
            veritatis.
        </div>
        <div>A ad aperiam at commodi corporis cum eius, ex fuga fugit incidunt inventore, iure nulla quis quisquam quod
            rem temporibus totam. Cupiditate deleniti, doloremque minima molestiae nam tenetur unde voluptate?
        </div>
        <div>Alias aliquam animi asperiores autem doloremque ducimus eaque eum fuga hic in, numquam, quis repellat
            reprehenderit similique soluta suscipit temporibus tenetur velit vero voluptatem! Doloribus officia quam
            ratione saepe soluta!
        </div>
        <div>Accusamus amet asperiores aspernatur aut autem, delectus deleniti deserunt ea earum eos est harum, laborum
            maiores nesciunt nobis odio officiis omnis optio perspiciatis porro recusandae rerum similique velit
            voluptate voluptatem!
        </div>
        <div>Amet eos iure odio officiis placeat repellendus, vel vitae. Aut consequuntur debitis deserunt dolores
            dolorum eaque enim, exercitationem explicabo fugit inventore itaque magnam minima natus nesciunt nisi
            nostrum saepe voluptas.
        </div>
        <div>Ab animi blanditiis dicta dolorem eos, fugiat libero magni mollitia placeat quidem ratione sit unde vel!
            Architecto asperiores doloribus, et harum inventore labore laudantium molestiae necessitatibus quae
            quisquam, sapiente tempora.
        </div>
        <div>Cum ducimus eius et ipsam possimus tempore unde veritatis? Asperiores blanditiis delectus, dolor eius porro
            recusandae unde! Alias commodi error fuga inventore, labore libero nihil odio, provident reiciendis sed
            sequi!
        </div>
        <div>Asperiores eligendi illum iste iure maxime voluptatum? Incidunt laudantium modi numquam provident tempore.
            Explicabo, neque, voluptatibus. Assumenda autem eaque, earum esse est fuga illum iste maiores quam ratione
            sit, voluptatem!
        </div>
        <div>Asperiores ducimus, incidunt! Architecto at commodi deleniti, hic inventore porro velit! Accusamus
            accusantium consequuntur eaque magnam, officiis provident sint totam. Dolor magnam suscipit tempore!
            Assumenda dolorem fugiat omnis. Inventore, quasi!
        </div>
        <div>Ab alias aperiam architecto asperiores, assumenda autem consequuntur culpa debitis distinctio dolorum eos,
            eum excepturi explicabo facilis illum in itaque labore laboriosam, maxime officiis perferendis possimus
            recusandae reprehenderit sequi vero.
        </div>
        <div>Ad aliquid error esse facere facilis illo in inventore maiores quos, repellendus rerum voluptates? Aliquam
            atque ducimus, facilis illo itaque, laborum maiores officiis praesentium repellat rerum soluta velit
            voluptas voluptate.
        </div>
        <div>A aliquam asperiores aut culpa dolor earum eligendi ex inventore libero nam pariatur quam quas quibusdam
            quis quod rem rerum sapiente similique, ullam ut? Debitis eligendi error nostrum sapiente soluta?
        </div>
        <div>Adipisci consequatur consequuntur corporis delectus dolores ea eaque, eum exercitationem explicabo facere
            iusto labore minus molestiae mollitia necessitatibus quae quas qui, quibusdam quod sequi, similique tempora
            voluptas voluptatem! Aut, omnis.
        </div>
        <div>Molestiae non odit possimus reiciendis? A accusantium animi, autem deserunt esse hic neque odit provident
            sapiente velit! Adipisci asperiores at dicta esse ipsum odio quaerat quam sint tempore voluptate,
            voluptatem.
        </div>
        <div>Aut eaque fuga fugit illum in nam quam quia quisquam! Alias dignissimos est, excepturi explicabo ipsa,
            ipsam laudantium nam nobis odio officiis omnis quis quo ratione totam vel. Placeat, reiciendis.
        </div>
        <div>Alias deserunt eaque iure nulla possimus. Aperiam dolorum eaque praesentium quidem vero? Aliquid animi
            asperiores eveniet fuga, itaque molestias nulla officiis pariatur placeat quam saepe sequi soluta ullam
            voluptate voluptatum.
        </div>
        <div>Ab asperiores assumenda atque, beatae blanditiis doloremque dolorum facere inventore numquam quam
            reiciendis totam unde voluptatibus. Accusantium assumenda beatae cum dolores exercitationem harum, officiis
            perferendis placeat provident reiciendis repellendus similique?
        </div>
        <div>A aliquid debitis exercitationem odit quas? Animi at, corporis dolor eligendi excepturi explicabo fugit
            illum libero magnam nemo nesciunt non possimus qui quisquam recusandae rem, repellendus sapiente sed ullam
            vero.
        </div>
        <div>Animi asperiores cum eligendi enim excepturi exercitationem fugit inventore ipsam iure iusto laudantium
            modi molestias natus nisi officiis, porro quas quia recusandae temporibus tenetur ut veniam vero voluptate!
            Aspernatur, nostrum!
        </div>
        <div>Aliquid culpa dignissimos maiores odit officia? Adipisci, atque consectetur cumque distinctio, facere id
            iure maxime minima molestias odit officia omnis quis repellendus sapiente, suscipit. Consequuntur eos iusto
            modi possimus repellat.
        </div>
        <div>Esse, maiores, nihil! A amet consequuntur culpa eum explicabo nam nemo ullam ut. Ducimus laudantium
            temporibus vero. At atque debitis delectus dolor vitae? Alias corporis culpa doloribus odio, quam quidem?
        </div>
        <div>Accusantium aliquid assumenda deleniti dolorem et id iusto labore, maiores neque nisi quisquam quos velit,
            voluptates. Aliquid beatae deserunt expedita facere, fuga ipsa, laborum perferendis provident saepe sint
            tempora ut?
        </div>
        <div>Alias amet autem beatae cum dignissimos distinctio, dolores error eum, excepturi explicabo fugiat illum,
            itaque iusto placeat provident quaerat quidem saepe sed tenetur vel! Accusantium culpa fugit neque sequi
            unde.
        </div>
        <div>Aliquid dicta impedit laborum maiores minima possimus quaerat qui quis, totam voluptatem. Ducimus earum
            esse fuga laborum necessitatibus quam quia tenetur. Aperiam aut ea esse labore nisi non quis ullam.
        </div>
        <div>Ad alias asperiores atque commodi cum deserunt dolorem est fugiat hic impedit labore molestiae, natus
            neque, nisi officiis, placeat quae quas quasi reprehenderit repudiandae saepe tempora ullam vel vero
            voluptas.
        </div>
        <div>Amet quam, quidem! Ad, consectetur deserunt doloremque necessitatibus non nostrum obcaecati sed sint
            tenetur ullam. Aliquid aperiam at, beatae cum facere ipsam libero molestias quae! Asperiores illum officia
            officiis optio.
        </div>
    </div>
</body>
</html>